// import React from 'react'
// import { Modal, ModalOverlay, ModalContent, Spinner } from '@chakra-ui/react'
// import styles from './index.module.less'
// import { useReactive, useControllableValue, useSafeState } from 'ahooks'
// import { useDispatch, useSelector } from 'react-redux'
// import { Dispatch, RootState } from '@/store'
// import classNames from 'classnames'
// import QRCode from 'qrcode.react'
// import { setPayPassword2 } from '@/api/user'
// import BlockUi from 'react-block-ui'
// import payPassword from '@/_api_/wallet/mods/common/payPassword'
// import {
//     render as reactRender,
//     unmount as reactUnmount,
// } from 'rc-util/lib/React/render'
// import AppProvider from '../../provider'
// interface PayPasswordProps {
//     open?: boolean
//     onChange?: (open: boolean) => void
//     type: RootState['app']['payPasswordModal']['type']
//     /** 重设密码 */
//     onReset?: () => void
//     /** 获取pay密码 */
//     onOk?: (password: string | number) => void
// }
// function useLoading<T extends { [x: string]: any }>(services: T) {
//     const [loading, setLoading] = useSafeState(false)
//     const [curren] = useSafeState(
//         Object.keys(services).reduce((pre: T, next) => {
//             ;(pre as any)[next] = async (...args: any[]) => {
//                 setLoading(true)
//                 try {
//                     return services[next](...args).then((res: any) => {
//                         setLoading(false)
//                         return res
//                     })
//                 } catch {
//                     setLoading(false)
//                 }
//             }
//             return pre
//         }, {} as T)
//     )
//     return {
//         loading,
//         runs: curren,
//     }
// }
// function PayPassword(props: PayPasswordProps) {
//     const state = useReactive({
//         pass: '',
//         repass: '',
//         bar: {
//             code: '0x15b8c7465fd952e239306174e4e9a2255c332f15',
//             size: 110, // 二维码大小
//             level: 4,
//             border: {
//                 color: ['#ffffff'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
//                 opacity: 0, //边框透明度 默认为1不透明 0~1
//                 lineWidth: 4, //边框宽度
//                 degree: 0, //边框圆角度数 默认5
//             },
//             color: ['#CF0CF6', '#4D70FE', '#6124FF'], //边框颜色支持渐变色
//         },
//     })
//     //   const config = useSelector((state: RootState) => state.app.payPasswordModal);
//     const [visible, setVisible] = useControllableValue(
//         { value: props.open, onChange: props.onChange },
//         {
//             defaultValue: false,
//         }
//     )
//     const { loading, runs: services } = useLoading({
//         setPayPassword2,
//         payPassword,
//     })
//     //   const dispatch = useDispatch<Dispatch>();
//     const resetConfirm = () => {
//         if (state.pass === state.repass) {
//             confirm()
//         }
//     }
//     const confirm = async () => {
//         props.onOk?.(state.pass)
//         const fn = props.type === 'NFT' ? resetPassword : verifyPassword
//         const flat = await fn()
//         if (flat) {
//             setVisible(false)
//         }
//     }
//     const resetPassword = async () => {
//         if (state.pass == state.repass && state.pass) {
//             return services
//                 .setPayPassword2(
//                     {
//                         pwd: state.pass,
//                     },
//                     false
//                 )
//                 .then((res) => {
//                     if (res.code == '200') {
//                         // dispatch.app.setUserInfo();
//                         props.onReset?.()
//                         return true
//                     }
//                 })
//                 .catch(() => false)
//         }
//         return false
//     }
//     const verifyPassword = async () => {
//         if (state.pass) {
//             return true
//         }
//         return false
//     }
//     return (
//         <Modal
//             isOpen={visible}
//             // isOpen={true}
//             onClose={() => {
//                 //   setState({
//                 //     blurshow: false,
//                 //   });
//             }}
//         >
//             <ModalOverlay
//                 className={styles.verlayclass}
//                 bg='rgba(255,255,255,0.7)'
//             />
//             <ModalContent bgColor='transparent' boxShadow='none'>
//                 <BlockUi
//                     blocking={loading}
//                     loader={<Spinner size='md' color='rgb(25,115,237)' />}
//                 >
//                     {props.type === 'INPUT' && (
//                         <div
//                             className={styles.passwordk}
//                             v-show='intpasswordshow'
//                         >
//                             <img
//                                 src={require('@/assets/public/icon@2x.png')}
//                                 className={styles.maskclosepng}
//                                 alt=''
//                                 onClick={() => {
//                                     setVisible(false)
//                                     state.pass = ''
//                                 }}
//                             />
//                             <img
//                                 className={styles.passwordbg}
//                                 src={require('@/assets/public/popupbg.png')}
//                             />
//                             <div
//                                 className={styles.passwordinfo}
//                                 style={{ paddingTop: '75px' }}
//                                 onClick={() => false}
//                             >
//                                 <div
//                                     className='font-12 Montserrat-SemiBold font-zi text-center'
//                                     style={{ width: 175, margin: '0 auto' }}
//                                 >
//                                     PLEASE KEY IN TRADING PASSWORD
//                                 </div>
//                                 <div
//                                     className={classNames(
//                                         styles.passwordintk2,
//                                         'flex-center flex-j-around mt-20'
//                                     )}
//                                 >
//                                     <div
//                                         className={classNames(
//                                             styles.passwordintbg2,
//                                             'flex-center'
//                                         )}
//                                     >
//                                         <input
//                                             maxLength={6}
//                                             className={classNames(
//                                                 styles.passwordzi2,
//                                                 'Montserrat-Medium'
//                                             )}
//                                             placeholder-class={
//                                                 styles.passwordtszi2
//                                             }
//                                             type='password'
//                                             value={state.pass}
//                                             onChange={(e) => {
//                                                 state.pass = e.target.value
//                                             }}
//                                             v-model='pass'
//                                             placeholder='PASSWORD'
//                                         />
//                                     </div>
//                                 </div>
//                                 <div
//                                     className={classNames(
//                                         styles.passwordbtnbox,
//                                         'flex-center mt-50'
//                                     )}
//                                 >
//                                     <div
//                                         className={classNames(
//                                             styles.pasbtn,
//                                             'flex-center flex-j-around',
//                                             state.pass
//                                                 ? styles.sendbtnactive
//                                                 : ''
//                                         )}
//                                         style={{ marginLeft: 48 }}
//                                         onClick={(e) => {
//                                             e.stopPropagation()
//                                             confirm()
//                                             return false
//                                         }}
//                                     >
//                                         <div className='font-13 Montserrat-Bold font-white'>
//                                             CONFIRM
//                                         </div>
//                                         <img
//                                             className={classNames(
//                                                 styles.icon48,
//                                                 styles.btniconl2
//                                             )}
//                                             src={
//                                                 state.pass
//                                                     ? require('@/assets/public/sendicon.png')
//                                                     : require('@/assets/public/sendh.png')
//                                             }
//                                         />
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                     )}
//                     {props.type === 'SET' && (
//                         <div className={styles.passwordk} v-show='passwordshow'>
//                             <img
//                                 src={require('@/assets/public/icon@2x.png')}
//                                 className={styles.maskclosepng}
//                                 alt=''
//                                 onClick={() => {
//                                     setVisible(false)
//                                     state.pass = ''
//                                     state.repass = ''
//                                 }}
//                             />
//                             <img
//                                 className={styles.passwordbg}
//                                 src={require('@/assets/public/popupbg.png')}
//                             />
//                             <div
//                                 className={styles.passwordinfo}
//                                 onClick={(e) => {
//                                     e.stopPropagation()
//                                     return false
//                                 }}
//                             >
//                                 <div className='font-10 Montserrat-SemiBold font-zi text-center'>
//                                     PLEASE SET YOUR 6-DIGIT TRADING PASSWORD
//                                 </div>
//                                 <div
//                                     className={classNames(
//                                         styles.passwordintk2,
//                                         'flex-center flex-j-around mt-20'
//                                     )}
//                                 >
//                                     <div
//                                         className={classNames(
//                                             styles.passwordintbg2,
//                                             'flex-center'
//                                         )}
//                                     >
//                                         <input
//                                             maxLength={6}
//                                             className={classNames(
//                                                 styles.passwordzi2,
//                                                 'Montserrat-Medium'
//                                             )}
//                                             placeholder-class={
//                                                 styles.passwordtszi2
//                                             }
//                                             type='password'
//                                             value={state.pass}
//                                             onChange={(e) => {
//                                                 state.pass = e.target.value
//                                             }}
//                                             v-model='pass1'
//                                             placeholder='ENTER PASSWORD'
//                                         />
//                                     </div>
//                                 </div>
//                                 <div
//                                     className={classNames(
//                                         styles.passwordintk2,
//                                         'flex-center flex-j-around mt-10'
//                                     )}
//                                 >
//                                     <div
//                                         className={classNames(
//                                             styles.passwordintbg2,
//                                             'flex-center'
//                                         )}
//                                     >
//                                         <input
//                                             maxLength={6}
//                                             className={classNames(
//                                                 styles.passwordzi2,
//                                                 'Montserrat-Medium'
//                                             )}
//                                             placeholder-class={
//                                                 styles.passwordtszi2
//                                             }
//                                             type='password'
//                                             value={state.repass}
//                                             onChange={(e) => {
//                                                 state.repass = e.target.value
//                                             }}
//                                             v-model='pass2'
//                                             placeholder='RE-RNTER PASSWORD'
//                                         />
//                                     </div>
//                                 </div>
//                                 <div
//                                     className={classNames(
//                                         styles.passwordbtnbox,
//                                         ' flex-center'
//                                     )}
//                                 >
//                                     <div
//                                         className={classNames(
//                                             styles.pasbtn,
//                                             'flex-center flex-j-around',
//                                             state.pass &&
//                                                 state.repass == state.pass
//                                                 ? styles.sendbtnactive
//                                                 : ''
//                                         )}
//                                         style={{ marginLeft: 48 }}
//                                         onClick={resetConfirm}
//                                     >
//                                         <div className='font-13 Montserrat-Bold font-white'>
//                                             NEXT
//                                         </div>
//                                         <img
//                                             className={classNames(
//                                                 styles.icon48,
//                                                 styles.btniconl2
//                                             )}
//                                             src={
//                                                 state.pass &&
//                                                 state.repass == state.pass
//                                                     ? require('@/assets/public/back.png')
//                                                     : require('@/assets/public/backh.png')
//                                             }
//                                             style={{
//                                                 transform:
//                                                     state.pass &&
//                                                     state.repass == state.pass
//                                                         ? 'rotate(180deg)'
//                                                         : '',
//                                             }}
//                                         />
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                     )}
//                     {props.type === 'NFT' && (
//                         <div className={styles.passwordk} v-show='buynftshow'>
//                             <img
//                                 src={require('@/assets/public/icon@2x.png')}
//                                 className={styles.maskclosepng}
//                                 alt=''
//                                 onClick={() => {
//                                     setVisible(false)
//                                 }}
//                             />
//                             <img
//                                 className={styles.passwordbg}
//                                 src={require('@/assets/public/popupbg.png')}
//                             />
//                             <div
//                                 className={classNames(
//                                     styles.passwordinfo2,
//                                     'text-center'
//                                 )}
//                                 style={{ paddingTop: 45 }}
//                             >
//                                 <div className={styles.WALLETAPP}>
//                                     TO ENJOY THE FULL NFKINGDOM EXPERIENCE
//                                     DOWNLOAD THE FREE KINGSWALLET APP
//                                 </div>
//                                 <div
//                                     className='mt-10 flex-center flex-j-around'
//                                     style={{
//                                         position: 'relative',
//                                         height: 125,
//                                         width: 125,
//                                         margin: 'auto',
//                                     }}
//                                 >
//                                     <img
//                                         src={require('@/assets/public/codek.png')}
//                                         style={{
//                                             width: 125,
//                                             height: 125,
//                                             position: 'absolute',
//                                             left: 0,
//                                             top: 0,
//                                         }}
//                                     />
//                                     <div className=''>
//                                         <QRCode
//                                             renderAs='svg'
//                                             value={
//                                                 'https://wallet.nfkings.com/'
//                                             }
//                                             size={state.bar.size}
//                                             level='L'
//                                             fgColor='#8227FB'
//                                             style={{ marginTop: 5 }}
//                                         />
//                                     </div>
//                                 </div>
//                             </div>
//                         </div>
//                     )}
//                 </BlockUi>
//             </ModalContent>
//         </Modal>
//     )
// }
// export default function() {
//     const config = useSelector((state: RootState) => state.app.payPasswordModal)
//     const dispatch = useDispatch<Dispatch>()
//     return (
//         <PayPassword
//             type={config.type}
//             open={config.show}
//             onReset={() => {
//                 dispatch.app.setUserInfo()
//             }}
//         />
//     )
// }
// export const check = (props: PayPasswordProps) => {
//     const container = document.createDocumentFragment()
//     let currentConfig = {
//         ...props,
//         open: true,
//         onChange: (open: boolean) => {
//             if (!open) {
//                 close()
//             }
//             props.onChange?.(open)
//         },
//     } as PayPasswordProps
//     const render = (renderProps: PayPasswordProps) => {
//         setTimeout(() => {
//             reactRender(
//                 // <AppProvider>
//                 //     <PayPassword {...renderProps} />
//                 // </AppProvider>,
//                 <div>teststererarararar</div>,
//                 container
//             )
//         })
//     }
//     const close = () => {
//         currentConfig = {
//             ...currentConfig,
//             open: false,
//         }
//         render(currentConfig)
//     }
//     render(currentConfig)
//     return {
//         destroy: close,
//     }
// }
